Skip to main content

AR Banners

AR banners are integrated signposts within an Augmented Reality experience. They display product details and allow users to make choices without leaving the AR environment. This could include actions like adding a product to a cart, checking out the detailed product page, or contacting a sales representative.

Configure the Banner​

The AR banner can be configured by updating the property arBanner on cylindo-viewer.

See API documentation

viewer.arBanner = {
  androidTitle: "Emma Armchair, a fully upholstered chair",
  displayOn: "ios-android",
  iosAction: "Read more",
  iosPrice: "$1500",
  iosSubtitle: "A fully upholstered chair",
  iosTitle: "Emma Armchair",
  redirectUrl: "https://example.com",
};

Example​

When users click the "View in AR" button on a device that supports AR, the configured banner will appear. On unsupported devices, a QR code will be displayed for easy access.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result
Loading...
Live Editor
function Example() {
  const viewer = React.useRef(null);

  useLayoutEffect(() => {
    viewer.current.arBanner = {
      androidTitle: "Emma Armchair, a fully upholstered chair",
      displayOn: "ios-android",
      iosAction: "Read more",
      iosPrice: "$1500",
      iosSubtitle: "A fully upholstered chair",
      iosTitle: "Emma Armchair",
      redirectUrl: "https://example.com",
    };
  }, [viewer]);

  return (
    <cylindo-viewer customer-id="4965" code="EMMA_ARMCHAIR" ref={viewer} />
  );
}